CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designflexbox
Nick Kinlen
Nick Kinlen

Reputation: 1406

Bootstrap: Rearranging rows into columns and changing the order of elements

I'm working on a project with React-Bootstrap. I have a section, which on mobile/xs view, should look like this:

enter image description here

The red squares are toggle buttons and the blue square is the current displayed image.

When viewed on a larger screen I want to change the order so that the first row of 3 red squares stacks into a column and is floated to the left, the second row of red squares is also stacked into a column and floated to the right, and the blue square is in the middle, like this:

enter image description here

How can I implement this with Bootstrap? I know Bootstrap is built on top of Flexbox, do I need to use the flex property? I'm new to Flexbox. Ideally I'd like to implement this without messing around with Flexbox. Is there a way I can use Bootstrap's offset to do this?

Having a tough time changing the red squares (which are initially set as rows on mobile view) to columns when on a large screen and then getting the blue square to sit in the middle.

Upvotes: 2

Views: 890

Answers (1)

Noah May
Noah May

Reputation: 1169

You can use .order utilities with breakpoints: https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

So the image (blue square) would use class="order-lg-2 order-3" so it can switch whether it is positioned 2nd on large screens (992px+) or 3rd on anything smaller.

To fix the 'rotating', I think the easiest thing to do would be having the containing component be a flex container and then using the flex direction breakpoints. The container would end up having the classes "d-flex flex-lg-row flex-column". The d-flex just declares the component to be a flexbox container. flex-lg-row and flex-column tells bootstrap to set up the items going horizontally in a row on large screens and vertically in a column on smaller ones (achieving the effect you're after if you include the order breakpoints).

You'll also need to do something similar for the individual red box rows.

I don't see any other way to rotate it (easily) besides flexbox. You can play this fun game (for free too) to help solidify what the different parts of flexbox are: https://mastery.games/p/flexbox-zombies.

Upvotes: 4

Related Questions