Switch Div elements with changing screen size-CodePudding

I've burned a full day on this stupid problem so apologize if I sound peeved. So I have a grid that I've designed mobile-first. Divs go like this

A
B
A
B
A
B
When the window size gets bigger, the grid splits in half
A B
A B
A B
A B
A B

But I want some elements that switch places when the grid splits
A B
B A
A B
B A
A B

I don't suppose there's a simple method to do this that doesn't involve pulling teeth right? I'm a green horn with web design.

https://jsfiddle.net/7y0av1L2/

The code is basically images accompanied by paragraphs. I want to swap them from time to time to give more visual variety.

<div>
        <p>
          GOTCHI is a speculative design project designed to incentivize a prolonged state of play via a quirky interaction method that encourages the user to manage their electronic footprint on their cellphone or computer. 
          <br>
          We carry more digital waste than ever before (outdated pictures, documents, videos, etc.). This hoarding of digital files and lack of organization is called Digital Clutter.
          <br>
          Enter GOTCHI, a homage to the traditional Japanese game Tamagotchi. He incentivizes the user to periodically delete data from their devices. By feeding GOTCHI digital clutter, the user is forced to brush through their data to decide what files to delete.
        </p>
      </div>
      <div>
        <img src="src/gotchi/video link.png" width="2104" height="3163">
      </div>
      <div>
        <h2>IDEATION</h2>
        <p>
          We began the preliminary design stage on the online platform Figma. We wanted to create a design that tackled themes of consumption and waste. This topic branched out into conversations regarding the management of physical waste and digital waste. 
          <br>
          One of my teammates expressed the desire to incorporate Tomogochi, a digital toy from her childhood into the design. I pitched the idea of combining it with a smart trashcan idea that we ideated over previously. This was where the idea of Gotchi originated.
        </p>
      </div>
      <div>
        <img src="src/gotchi/figma board.png" width="1121" height="1159">
      </div>

CodePudding user response：

With Bootstrap 5 you can use the order classes. https://getbootstrap.com/docs/5.0/utilities/flex/#order

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-1 order-md-3 p-4 bg-dark text-white">First item Mobile, Last Item Desktop</div>
  <div class="order-2 order-md-1 p-4 bg-highlight">Second item Mobile, First Item Desktop</div>
  <div class="order-3 order-md-2 p-4 bg-dark text-white">Last Item Mobile, Second Item Desktop</div>
</div>

CodePudding user response：

Hope it's Work for you !!!

you can manage your item using below class

.push-right {float: right;}
.pull-left {float: left;}

* {margin: 0; padding: 0; box-sizing: border-box;}
        .wrapper {max-width: 1000px; width: 100%; margin: 0 auto; justify-content: center;}
        .black {background: #000;}
        .gray {background: #666;}
        .item {text-align: center; max-width: calc(500px - 20px); width: 100%; font-size: 40px; color: #fff; margin: 10px; float: left;}
        
        .push-right {float: right;}
        .pull-left {float: left;}
        
        @media  (max-width: 991px){
            .item {max-width: calc(100% - 20px);}
        }

<div class="wrapper">
        <div class="item black">A</div>
        <div class="item gray">B</div>
        <div class="item black push-right">A</div>
        <div class="item gray pull-left">B</div>
        <div class="item black">A</div>
        <div class="item gray">B</div>
        <div class="item black push-right">A</div>
        <div class="item gray pull-left">B</div>
    </div>