引导顺序更改取决于显示为1列还是2列 [英] Bootstrap order changes depending if displayed as 1 or 2 column

问题描述

我有一个网页，其中显示两列卡片，除非屏幕宽度小于 md 大小.我的问题是我希望最重要的项目显示在页面上方，所以我将重要的项目放在两列的第一位(例如，我想按字母顺序从A到D排序)

I have a webpage which displays two columns of cards, unless screen width gets smaller then md size. My problem is that I want the most important items to appear higher up the page, so I put important items first in the two columns (e.g I want ordered alphabetically A - D)

<row>
   <div class="col-md">
      <item A>
      <item C>
   </div>
     <div class="col-md">
      <item B>
      <item D>
   </div>
</row>

因此在两列屏幕上可以按A，B，C，D的顺序查看

so on two column screen can be seen in order A, B, C, D

但是在单列显示时，它显示第一列，然后显示第二列，所以您最终得到A，C，B，D

But when single column it displays first column and then second column so you end up with A, C, B, D

随着数据进入列，列必须进入行，而不是反过来，我看不出如何解决这个问题.

As data goes in columns and columns must go in rows not the other way round I dont see how to solve this.

展示问题的屏幕截图

推荐答案

boostrap可能无法处理此问题，但是如果每个元素都是同级元素，则将flex和column css结合使用可能会对您有所帮助.

boostrap might not be able to handle this, but a mix of flex and column css might help you here if every element are siblings.

这是通过自定义类使用部分bootsrtap和CSS列的想法:

here is the idea using partially bootsrtap and column CSS via custom class:

div div {
  border: solid;
  /* see us */
  margin: 2px;
  padding: 0.25em;
  break-inside: avoid;/* goes along with column-count */
}

:first-line {
  font-weight: bold;
}

@media (min-width: 768px) {
  .column {
    column-count: 2
  }
  .gap-0 {
    column-gap: 0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<p>Run snippet in full page, then resize window to see behavior while turning into columns</p>
<div class="d-md-block d-flex flex-column column gap-0">
  <div class="order-0">item A<br>line 2<br>line 3</div>
  <div class="order-2">item C<br>line 2<br>line 3</div>
  <div class="order-1"> item B<br>line 2</div>
  <div class="order-3">item D</div>
</div>

这篇关于引导顺序更改取决于显示为1列还是2列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！