Eine Spalte in eine andere Zeile schieben

Also hier ist, was ich in einem LG Design habe.Eine Spalte in eine andere Zeile schieben

+-----+-----+ 
    | A | B | 
    +-----+-----+ 
    | C | D | 
    +-----+-----+

Ich möchte es in einem MD-Design neu zu ordnen wie folgt aussehen:

+---------+---------+ 
    |   A   | 
    +---------+---------+ 
    | C | D | B | 
    +-------------------+

Gibt es eine Möglichkeit für mich zum zweiten „B“ aus der ersten Reihe zu schieben, in dieser Position ? :)

Quelle

2016-04-26 borbs

Hat es nicht testen, aber für A: col-MD-12 und für B: col-md-Push-X –

Probieren Sie etwas wie folgt aus:

.row div { 
 
    border: 1px solid black; 
 
    }

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

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-12">A</div> 
 
    <div class="col-lg-6 col-md-4 col-md-push-8 col-lg-push-0">B</div> 
 
    <div class="col-lg-6 col-md-4 col-md-pull-4 col-lg-pull-0">C</div> 
 
    <div class="col-lg-6 col-md-4 col-md-pull-4 col-lg-pull-0">D</div> 
 
    </div> 
 
</div>

die Klasse col-md-12 auf die Spalte A Durch das Hinzufügen, wird es die ganze Zeile und Spalte B dauert bis in die nächste Zeile fließen . Es wird jedoch auf der linken Seite angezeigt. Wenn Sie möchten, dass es auf der rechten Seite angezeigt wird, müssen Sie die Klassen col-*-pull-* und col-*-push-* angeben.

Quelle

2016-04-26 07:46:44 Syjin

Das ist es. Es funktionierte. Ich wusste nicht, dass ich mehr als 12 Cols hintereinander benutzen konnte ... Vielen Dank! :) – borbs

Es ist ziemlich einfach und kann durch die Definition von Klassen erreicht werden "col-md-n col-lg-n col-md-push-m col-lg-push-m" (wobei n = Anzahl der Spalten, die Sie wollen um auf md oder einem lg-Bildschirm anzuzeigen, ist m eine Spalte für Push- und Pull-Klassen. Überprüfen Sie dieses Snippet. Wechseln Sie zur vollständigen Seite und vergrößern Sie die Ansicht, um die Änderungen zu sehen.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-12 text-center" style="border:1px dashed pink;"> 
 
     <h1>A</h1> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="col-lg-6 col-md-4 col-md-push-8 col-lg-push-0 text-center" style="border:1px dashed pink;"> 
 
     <h1>B</h1> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
     <div class="col-lg-6 col-md-4 col-md-pull-4 col-lg-pull-0 text-center" style="border:1px dashed pink;"> 
 
     <h1>C</h1> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
     <div class="col-lg-6 col-md-4 col-md-pull-4 col-lg-pull-0 text-center" style="border:1px dashed pink;"> 
 
     <h1>D</h1> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

Quelle

2016-04-26 07:49:11

Dies entspricht nicht der Anforderung des op. –

Bitte, wechseln Sie auf die ganze Seite und vergrößern Sie die Ansicht, um die Änderungen zu sehen. –

... Geht der Abschnitt B nach rechts? Bitte wechseln Sie zur vollständigen Seite und vergrößern und verkleinern Sie die Änderungen. –

Eine Spalte in eine andere Zeile schieben

Antwort

Verwandte Themen