Question

我连续有3列。中间列需要在小屏幕上显示在左侧，然后在右侧下方。 I.E.大屏幕1 2 3，小屏幕2 1 3.我无法在类似问题上找到此代码，以便工作。

<div class="row">
<div class="col-md-6 col-md-push-3">
    2
</div>
<div class="col-md-3 col-md-pull-6">
    1
</div>
<div class="col-md-3">
    3
</div>
</div>

有什么建议吗？

Answer 1

div {
	width: 100%;
	height: 60px;
	border: 1px solid #000;
	background-color: #ccc;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
	<div class="col-xs-6 col-md-6 col-md-push-3">
	    2
	</div>
	<div class="col-xs-3 col-md-3 col-md-pull-6">
	    1
	</div>
	<div class="col-xs-3 col-md-3">
	    3
	</div>
</div>

Answer 2

这完美无缺。

    <div class="container text-center">
<div class="row">
<div class="col-md-6 push-md-3">
<div class="alert alert-danger">
    1
</div></div>

<div class="col-md-3 pull-md-6">
<div class="alert alert-info">
    2
</div></div>

<div class="col-md-3">
<div class="alert alert-success">
    3
</div>
</div></div></div>

在小屏幕上将中间列推到顶部

2 个答案: