Bootstrap div彼此相邻，然后在移动视图中彼此相邻

Question

我的布局相对简单。顶部有一个标题，导航栏左侧列中有图像，右侧有内容。 qazxsw poi

当我切换到移动响应视图时，我希望导航列在默认视图中并排显示nagivation列表和图像，而不是顶部和底部。

到目前为止，我使用了以下代码

使用上面的代码，布局在默认视图中看起来很好，但在较小的响应视图中，我无法将图像显示在无序列表旁边。无序列表和图像显示在彼此之下，就像在默认布局中一样，占用了大量空间。我还想用css从顶部裁剪较小的图像，但我也不介意使用较小尺寸的图像。

任何帮助，将不胜感激。

Answer 1

您应该使用左栏内的响应式

<div class="row">
    <div class="col-lg-2">
        <div class="row">
            <div class="col-sm-10">
                <ul style="margin-left: 50px;">
                    <li><a href="/news">News</a></li>
                    <li><a href="/events">Events</a></li>
                </ul>
            </div>
            <div class="col-sm10">
                <img src="/images/navbg.png" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-lg-9">
        <h3>Blog Title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

类...

col-

https://www.codeply.com/go/s2HSMmbnkv

左边的

<div class="row">
    <div class="col-sm-2 col-12">
        <div class="row">
            <div class="col-sm-10 col-9">
                <ul style="margin-left: 50px;">
                    <li><a href="/news">News</a></li>
                    <li><a href="/events">Events</a></li>
                </ul>
            </div>
            <div class="col-sm-10 col-3">
                <img src="//placehold.it/200" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-sm-9">
        <h3>Blog Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

在最小的屏幕上变成全宽（col-sm-2），然后内部列（col-12，col-9）并排变成。您可能希望根据需要调整断点（sm）和宽度。

Answer 2

除了ZimSystems答案（我现在还不能发表评论），但如果您使用响应式col类（取决于Bootstrap版本），他是对的。您应该能够将订单类与响应类一起使用。例如

col-3

基本上，订单类允许您拉动其他人面前的某些div。是一个非常需要的功能，现在它在它使页面上的订购内容如此响应它是不真实的：'）

这里是bootstrap bOrder qazxsw poi的链接

Answer 3

<div class="col-8 order-2 order-md-1"></div>
<div class="col-4 order-1 order-md-2"></div>

这对你有用。