Bootstrap order changes depending if displayed as 1 or 2 column

问题

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>

so on two column screen can be seen in order A, B, C, 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.

Screenshot to demonstrate the issue

回答1:

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.

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>

回答2:

I think what you need to do is that you need to define a complete row and then add the elements of the other row below that. For Eg:

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

This will give you the desired effect. For more info: https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

来源：https://stackoverflow.com/questions/59398922/bootstrap-order-changes-depending-if-displayed-as-1-or-2-column

标签

html

css

bootstrap-4