css - 推拉效果在 bootstrap 3 中不起作用

Question

我想在小型设备和超小型设备的段落上方显示列表。我使用了 Bootstrap 中可用的 push-* 和 pull-* 类，但它不起作用。请建议。提前致谢。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-sm-push-6 col-xs-12 col-xs-push-12"> 
 <p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p> 
</div>  
<div class="col-md-8 col-sm-6 col-sm-pull-6 col-xs-12 col-xs-pull-12"> 
    <ul class="list-unstyled">
    <li>sse viverra eleifend tortor tellus suscipit</li>
    <li>cras posuere pede placerat, velit</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>sse viverra eleifend tortor tellus suscipit</li>
    <li>cras posuere pede placerat, velit</li>
    </ul>
</div>


</div>
</div>

Answer 1

如果您希望列表在小型设备上位于顶部，在中型设备上位于右侧，您需要更改 DOM 中元素的顺序。然后你可以使用push和pull来做你想做的事

点击“整页”按钮查看...

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


<div class="container">
    <div class="row">
         <div class="col-md-8 col-md-push-6">
            <ul>
                <li>sse viverra eleifend tortor tellus suscipit</li>
                <li>cras posuere pede placerat, velit</li>
                <li>Lorem ipsum dolor sit amet</li>
                <li>sse viverra eleifend tortor tellus suscipit</li>
                <li>cras posuere pede placerat, velit</li>
            </ul>
        </div>
        <div class="col-md-4 col-md-pull-6">
            <p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
        </div>
       
    </div>
</div>