I'm looking for ideas for how to rework this page in mobile and desktop to make information easier to read.
I'm currently using bootstrap cards inside card columns.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
Well as you might notice with this specific issue, there is no enough space to show all desirable values within provided screen. So as making them prioritized, you should also consider displaying a visually consistent interface. To achieve this beyond having a simple look, you'd better not to use any gradient color other than pointing out an action within that frame. There's not just a single issue but, to be able to describe simply what you can do with this interface;
Here is a basic view of mobile interface you can apply to your case;
After providing data consistency through all your app, you may simply choose to give these "not first degree" informations additionally as a (onclick, hover whatever you desired) feature.
And as a Desktop solution, since you choose to use Bootstrap's card component, you should use the rest of the data within its summary section which I recommended to hide with mobile.
the gradients..yeah, keep solid colors instead. for the equipment screen, those blocks need padding inside and force the text after the 3 bars to flow into the next line, that 'cat' coming in at the end and then continuing onto the next line is a little bit messy. perhaps the font sizes on the desktop can be bumped up?
i also think it would be good to make a few rules to each element on the phone in terms of alignment, spacing and padding, looks a little haywire but a few more iterations and you should be good to go!