Question

尝试使用bootstrap，HTML和CSS重新排序列时遇到了一些问题。

目前，我的布局是这样的：

B和C包含在单个列中，而A有自己的列。在台式机和平板电脑上也可以这样，但是我需要为小型设备重新排序内容以获得类似的内容：

我的代码目前是这样的：

    <div class="container">
        <div class="row padding-m">
            <div class="col-md-6">
                <div class="card" style="padding: 0px 20px;">
                    BLOCK A
                    
                </div>
            </div>
            <div class="col-md-6">
                <div class="card" style="border: none;">
                    
                    BLOCK B
                    
                    BLOCK C
                    
                </div>
            </div>
        </div>
    </div>

所以我的问题是，一方面，我需要将第2列分成两部分，另一方面，我需要B移动到列顶部，C移动到底部。有没有办法做到这一点？

Answer 1

假设“A”在图片中较高，只需在其他列上使用pull-right，并col-xs-12以确保移动设备上的全宽...

Demo

<div class="row">
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                B
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <div>
                A
            </div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                C
            </div>
        </div>
    </div>

Demo

Answer 2

使用bootstrap 4 pull-right不再起作用，它也与flex不兼容。

与flex兼容的解决方案可以基于：

display: contents使元素的子元素看起来像是元素父元素的直接子元素，而忽略了元素本身。当使用CSS网格或类似布局技术时应忽略包装元素时，这很有用。
order: -1用于重新排序“ B”元素。

没有任何库的纯HTML + CSS解决方案的完整代码：

* {
  box-sizing: border-box;
}

.main-container {
  display: flex;
}

.item {
  width: 50%;
}

.photo-container {
  background: #AAF;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1rem;
}

.photo {
  background: #55F;
  width: 140px;
  height: 220px;
  border: solid 1px #33F;
}

.product-details h1 {
  background: #FAA;
  margin: 0;
  padding: 1rem;
}

.product-description {
  background: #FFA;
  padding: 1rem;
}

@media (max-width: 600px) {
  .main-container {
    flex-direction: column;
  }

  .item {
    width: 100%;
  }
  
  .product-details {
    display: contents;
  }
  
  .product-details h1 {
    order: -1;
  }
}

<div class="main-container">
  <div class="item photo-container">
    <div class="photo"></div>
  </div>
  <div class="item product-details">
    <h1>Product name</h1>
    <div class="product-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

基于引导程序4的解决方案：

* {
  box-sizing: border-box;
}

.photo-container {
  background: #AAF;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.photo {
  background: #55F;
  width: 140px;
  height: 220px;
  border: solid 1px #33F;
}

.product-details h1 {
  background: #FAA;
}

.product-description {
  background: #FFA;
}

@media (max-width: 576px) {
  .product-details {
    display: contents;
  }
  .product-details h1 {
    order: -1;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row flex-column flex-sm-row">
    <div class="col-12 col-sm-6 photo-container">
      <div class="photo"></div>
    </div>
    <div class="col-12 col-sm-6 product-details">
      <h1>Product name</h1>
      <div class="product-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>

Bootstrap：在小屏幕上重新排序3列

2 个答案: