Mobil görünümde üstte Bootstrap sağ Sütunu

Ben böyle bir Bootstrap Sayfa var:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Görünüşe göre:

-----
|A|B|
-----

Mobil bir cihazda bakarsam, A Sütunu üstte, ancak B'nin üstte olmasını istiyorum. Mümkün mü? Bir itme ile denedim, ama işe yaramadı.

Bunu yapmak için Sütun sırasını kullanın .

col-md-push-6sütunu sağa 6 "itecek" ve sütunu col-md-pull-6"md" veya daha büyük görünüm bağlantı noktalarında "sola" çekecektir. Daha küçük görünüm bağlantı noktalarında sütunlar tekrar normal sırada olacaktır.

Bence insanları fırlatan şey, HTML'nizde B'yi A'nın üstüne koymanız gerektiğidir . A'nın HTML'de B'nin üzerine çıkabileceği farklı bir yol olabilir, ancak nasıl yapılacağından emin değilim ...

DEMO

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

görünüm bağlantı noktası> = md

|A|B|

görünüm bağlantı noktası <md

|B|
|A|

Her ikisi de 6'ya eşit olmayan sütunlar kullanıyorsanız, itme miktarının ilk sütun boyutuna eşit olmayacağını belirtmek gerekir.

2 sütununuz (A ve B) varsa ve A sütununun "sm" veya daha büyük görünüm pencerelerinde daha küçük ve sağ olmasını, ancak mobil (xs) görünüm penceresinin üstünde olmasını istiyorsanız, aşağıdakileri kullanırsınız:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

Aksi takdirde, sütunların hizalanması görünmez.

Flexbox Yönü

Bootstrap 4 için, .row div'inize aşağıdakilerden birini uygulayın:

.flex-row-reverse

Duyarlı ayarlar için:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

Bootstrap 4'te, büyük ekranlar için bir sipariş ve daha küçük ekranlar için farklı bir sipariş istediğinizi varsayalım:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Atlayabilirsiniz order-1ve order-2üstü. Sadece netlik için eklendi. Varsayılan düzen, sütunların html'de görünme sırası olacaktır.

Daha fazla bilgi için https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Aşağıdaki kod benim için çalışıyor

.row {
    display: flex;
    flex-direction: column-reverse;
}

Bu şimdi (Bootstrap v4'te) order- sınıfları eklenerek yapılır.

Bkz. Https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Bunun gibi:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

Farklı boyutlarda üç bootstrap 4 sütun var. Ekran küçüldükçe üçüncü sütun gizlenir, ardından ekran hareketsiz hale geldiğinde ve div'ler istiflendiğinde, sütun 2 en üstte olacak şekilde sıra değişir.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

Umarım bu yardımcı olur. Bunu anlamak zor buldum ama sonunda bu iplik yardımı ile oraya var, ama biraz vurmak ve vuramamak oldu.

Bu benim için Bootstrap 4'te çalıştı:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

Kullandım:

.row {
   display: flex;
   flex-direction: row-reverse;
}

Bootstrap V4'te (18 Ocak 2018'de Yayımlandı) Yeniden Sıralama Sınıflarını kullanabilirsiniz. Yeniden sıralama sekmesi altındaki bilgileri burada bulabilirsiniz.

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 4 esnek sınıfları içerir. Bkz. Https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>