css 屏幕大小不断变化的Switch Div元素

9o685dep 于 2022-12-30 发布在其他

关注(0)|答案(3)|浏览(135)

我已经在这个愚蠢的问题上浪费了一整天，如果我听起来很生气，请道歉。所以我设计了一个网格，移动优先。Div是这样的
A类
B
A类
B
A类
B
当窗口变大时，格网将一分为二
A和B
A和B
A和B
A和B
A和B
但我需要一些元素在网格拆分时交换位置
A和B
B和A
A和B
B和A
A和B
我不认为有一个简单的方法可以做到这一点，不涉及拔牙，对不对？我是一个新手与网页设计。
https://jsfiddle.net/7y0av1L2/
代码基本上是图片配以段落。我想不时地交换它们，以给予更多的视觉多样性。

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

css

来源：https://stackoverflow.com/questions/70149877/switch-div-elements-with-changing-screen-size

3条答案

按热度按时间

s5a0g9ez1#

使用Bootstrap 5，您可以使用订单类。https://getbootstrap.com/docs/5.0/utilities/flex/#order

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

赞(0）回复(0）举报 2022-12-30

fafcakar2#

你好，我有另一个解决这个棘手的问题。

* {margin: 0; padding: 0; box-sizing: border-box;}
        .wrapper {max-width: 1000px; width: 100%; margin: 0 auto;  display: grid; grid-template-columns: auto auto; gap: 10px; padding: 10px;}
        .black {background: #000;}
        .gray {background: #666;}
        .item {text-align: center; font-size: 40px; color: #fff; padding: 20px 0; width: 100%;}
        
        
        @media (min-width: 768px) {            
            .item1 {grid-column: 1 / 5;}
            .item2 {grid-column: 5 / 9;}
            .item3 {grid-column: 5 / 9;}
            .item4 {grid-column: 1 / 5; grid-row:2;}
            .item5 {grid-column: 1 / 5;}
            .item6 {grid-column: 5 / 9;}
            .item7 {grid-column: 5 / 9;}
            .item8 {grid-column: 1 / 5; grid-row:4;}
        }
        
        @media  (max-width: 768px){
            .item {display:grid; grid-column: 1 / span 2;}
        }

<div class="wrapper">
        <div class="item item1 black">A</div>
        <div class="item item2 gray">B</div>
        <div class="item item3 black">A</div>
        <div class="item item4 gray">B</div>
        <div class="item item5 black">A</div>
        <div class="item item6 gray">B</div>
        <div class="item item7 black">A</div>
        <div class="item item8 gray">B</div>
    </div>

赞(0）回复(0）举报 2022-12-30

ua4mk5z43#

希望它能为你工作！！！
你可以管理你的项目使用下面的类

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

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-30

我来回答

css 屏幕大小不断变化的Switch Div元素

3条答案

相关问题

热门标签

最新问答