CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4flexbox
Adam Mazurkiewicz
Adam Mazurkiewicz

Reputation: 103

Different flexbox alignment on small screen for 3 divs

Basically I need 3 divs to align on small width (<576px) like in the top of image below and on rest of the widths (>576px) like in the bottom on the image below.

enter image description here

How it can be achieved with bootstrap flexbox classes?

I'm assuming base set is:

<div class="d-flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

I don't see .column and .row classes being used because A and B don't share same div on small and large screens... experimented with differnt classes with no success.

Upvotes: 0

Views: 144

Answers (1)

Harmeet Singh
Harmeet Singh

Reputation: 144

For the alignment top of the image. Use align-content utilities on flexbox containers to align flex items together on the cross axis. You can choose 

<div class="d-flex align-content-start flex-wrap">...</div>

for the content top of the image and for bottom you can choose 

<div class="d-flex align-content-end flex-wrap">...</div>

Here, I am assuming that image would be in different <div> and For the responsive behaviour you can use .order classes

Upvotes: 1

Related Questions