Need help with div stacking order

[kineticcreative123]

Hi everyone,

I am trying to chage the stacking order for some div's with text and images on mobile. They are side by side in rows of two. I uploaded screen shots of desktop and mobile of what I have currently. When stacking on mobile they stack with text-text-image-image and so on. I would like them to be text-image-text-image, etc. 

This is the link to my site I coded it and am hosting it in Marketo as a landign page:
https://offers.premierinc.com/Transforming-Healthcare

BTW-I removed what I tried in order not to confuse so basically I'm starting over with this post. 

I found this on stackeoverflow but can't get it to work with my code. 

.col {
  display: flex;
  flex-wrap: wrap;
}

.col div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 200px;
  border: 2px solid green;
  font-size: 18px;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .col div:nth-child(1) {
    order: 1;
  }
  .col div:nth-child(2) {
    order: 2;
  }
  .col div:nth-child(3) {
    order: 4;
  }
  .col div:nth-child(4) {
    order: 3;
  }
}

<div class="col">
  <div class="text">.text column</div>
  <div class="img">.image column</div>
  <div class="text">.image column</div>
  <div class="img">.text column</div>

</div>

I've attached screenshots for someone to view.  

This is the code block in question with the div's I need to stack in bold. 

<section class="about-us-area section-padding-0-100 clearfix">

        <div class="container">

            <div class="row align-items-center">

                <div class="col-12 col-lg-6 ">

                    <div class="who-we-contant">

                        <div class="dream-dots text-left fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">

                            <img src="https://offers.premierinc.com/rs/381-NBB-525/images/noun-pills-1104684.svg" width="50px"alt="">

                        </div>

                        <h4 class="fadeInUp" data-wow-delay="0.3s">Continuum of Care</h4>

                        <p class="fadeInUp" data-wow-delay="0.4s">Premier is supporting healthcare providers on the care continuum with

a dedicated purchasing program and experts, technology-driven supply chain tools, artificial intelligence (AI)-backed surveillance solutions and by advocating for necessary legislative reform. 

</p><a class="btn dream-btn mt-30 fadeInUp" data-wow-delay="0.6s" href="#">Read More</a>

                    </div>

                </div>

                <div class="col-12 col-lg-6">

                    <div class="welcome-meter fadeInUp" data-wow-delay="0.7s">

                        <img src="https://offers.premierinc.com/rs/381-NBB-525/images/about12.png" class="center-block" alt="">

                    </div>

                </div>

            </div>

        </div>

    </section>

Thanks for any help with this. 

[Nancy OShea]

To be honest, I don't think it matters a whole hill of beans which comes first in the vertical order DOM given how mobile users swipe their devices up & down to find content.

That said, you need to think about vertical order DOM when you plan your content because Bootstrap and other responsive frameworks are mobile-first.

1. Reorder content <divs> precisely the way you want it in mobile DOM.  DO NOT use floated text & images for this. Keep text and images in separate <div>.

2. Add Bootstrap order classes to rearrange <divs> on large devices.  Refer to Bootstrap 5 order-classes below for working examples.

https://getbootstrap.com/docs/5.0/layout/columns/#order-classes

Hope that helps.

[kineticcreative123]

Thanks so much Nancy. I had no idea Bootstrap had that built in. So easy! One problem though now desktop is not stacking correctly they should be like below rotating back and forwarth. Also attached is what desktop is doing now. Thanks again for taking the time to reply.

This is what it looks like now

[Nancy OShea · Accepted solution]

Imagine the natural order on mobile is this:

<div class="row">
    <div class="col> Child 1 </div>
    <div class="col> Child 2 </div>
    <div class="col> Child 3 </div>
    <div class="col> Child 4 </div>
</div>

But you want to rearrange the visual order on large devices to this:

Child 2 | Child 1

Child 4 | Child 3

<div class="row">
    <div class="col order-lg-2"> Child 1 </div>
    <div class="col order-lg-1"> Child 2 </div>
    <div class="col order-lg-4"> Child 3 </div>
    <div class="col order-lg-3"> Child 4 </div>
</div>

I hope that makes sense.

[kineticcreative123]

Hi Nancy,

I'm totally lost now. I added the -lg- to the style but must not be doing this correctly. Is that what you meant? 
Below is a new test link. 
https://offers.premierinc.com/transforming-test

UPDATE: Got it to work by just adding an extra class to each like you supplied. 

Thanks again!

order-lg-1

[osgood_]

Hi Nancy,

I'm totally lost now. I added the -lg- to the style but must not be doing this correctly. Is that what you meant? 
Below is a new test link. 
https://offers.premierinc.com/transforming-test

UPDATE: Got it to work by just adding an extra class to each like you supplied. 

Thanks again!

order-lg-1

By kineticcreative123

Why dont you just create your own 'order' classes? You only have 5 rows, of which 1/3/5 will be in the correct order on mobile devices so you only need to move the text in row 2 above the image - you can add a class of 'three' to the container the text is in and add a class of 'four' to the container the image is in. Do the same for row 4 - add a class of 'seven' to the container the text is in and a class of 'eight' to the container the image is in.

Add the media query below, that'll do it!

@media screen and (max-width: 1000px) {

.three {

order: 3;

}

.four {

order: 4

}

.seven {

order: 7;

}

.eight {

order: 8;

}

}

[Nancy OShea]

Why dont you just create your own 'order' classes?
By osgood_

==========

No need to.  Bootstrap's built-in order classes are already there.  🙂

[osgood_]

Why dont you just create your own 'order' classes?
By osgood_

==========

No need to.  Bootstrap's built-in order classes are already there.  🙂

By Nancy OShea

But most of the rest of the mark-up doesn't use Bootstrap from what I can see, so really no need for adding a bloated solution just for a simple side by side section and to re-order 4 divs. Plus there should be no need for applying the 'order' utility class to each and every single div as 3 out of the 5 sections are in the correct order by default! Thats progress for ya!

[Nancy OShea]

But most of the rest of the mark-up doesn't use Bootstrap from what I can see,

By osgood_

===========

I guarantee you the current site is built with Bootstrap, albeit a very old version.  It needs to be updated to Bootstrap 5.

[osgood_]

But most of the rest of the mark-up doesn't use Bootstrap from what I can see,

By osgood_

===========

I guarantee you the current site is built with Bootstrap, albeit a very old version.  It needs to be updated to Bootstrap 5.

By Nancy OShea

Not sure what youre looking at but there's nothing much Bootstrapy about the below code, taken from the current website: 'classycloseIcon', 'classy-menu', 'classynav', 'cross-wrap', 'dreamNav' , 'section-padding-100-0' , 'features' , 'footer-content-area ' , 'innerWrapDiv' , 'mktEditable' , 'header-area' , 'section-padding-100-50' , 'section-padding-0-100'

I cant recall any of the above being Bootstrap default utilities features. The website or that particular page has a smattering of Bootstrap intermixed with some other animate library stuff but most of the classes are bespoke, a combination of this that and the other. The main website I cant see any Bootstrap being used.

[Nancy OShea]

Behold the evidence of  Bootstrap1.min.css

It looks to be an old theme purchased from Envato or Themeforest. 

[osgood_]

I don't think it's being used as the core solution throughout the main website as l cant see much related to Bootstrap on many of the pages, apart from a few classes dropped in here and there, although it's hard to say what is being used given the obvious over reliance on third party code...........a mix and match approach is what l describe it as.

[Nancy OShea]

I've seen this before.  Themes often use a hybrid approach, borrowing bits & pieces from here, there & everywhere...

Whatever works, I guess.