• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Need help with div stacking order

Contributor ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

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. 

Views

469

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 13, 2023 Sep 13, 2023

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 cla
...

Votes

Translate

Translate
Community Expert ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

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.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

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.

 

screencapture-file-Users-Wes-Whalen-Desktop-PINC-Marketo-Transforming-Healthcare-transforming-healthcare-html-2023-09-13-17_29_10.png

 

This is what it looks like now

 

screencapture-file-Users-Wes-Whalen-Desktop-PINC-Marketo-Transforming-Healthcare-transforming-healthcare-html-2023-09-13-19_57_38.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 13, 2023 Sep 13, 2023

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

quote

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;

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

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

==========

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

quote
quoteWhy 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!

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

quote

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.

 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

quote
quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

Behold the evidence of  Bootstrap1.min.css

image.png

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

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 14, 2023 Sep 14, 2023

Copy link to clipboard

Copied

LATEST

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

Whatever works, I guess.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines