如何在调整大小时更改div的位置？

Question

我有一个问题，我想做的只是一定的宽度（使用@media）我想把我的左侧div改为已经存在的那个下方的右侧。我尝试了一切，包括更改显示，使用左边距定位，但由于父容器不起作用。我唯一想到的就是在右侧制作相同的左侧div并使显示为无，但我很确定这不是处理它的方法。我使用Bootstrap 4。

这是HTML：

.main{
		background-color: #aaa;
		box-shadow: 3px 3px 20px #000000;
		border-radius: 20px;
		margin-left: 20px;
		margin-right: 20px
	}
	
	.left{
		background-color: #aaa;
		max-width: 200px;
		height: 1%;
		border-radius: 20px;
	}
	
	.right{
		background-color: #aaa;
		max-width: 200px;
		height: 1%;
		border-radius: 20px;	
	}	

	.right-content{
		width: 100%;
		text-align: center;
		float: center;
		margin-top: 10px;
	}
	
	.parent-container {
		display: flex;
	}

    <div class="parent-container">
       <div class="container left">
           <div class="row">
               Left content
           </div>
       </div>
	
	    <div class="container card main py-3">
		    <div class="container card">
		    	<div class="card-body">
			    	<div class="row">
				    	<div class="col-lg-12 text-center">
					    	<h2>TITLE2</h2>
				    	</div>
				    </div>
				<div class="row">
					<div class="col-md-12 text-center">
						<a href="#" class="link1">
                          <img src="2.jpg">
							<h3>Title3</h3>
						</a>
					</div>
				</div>
			</div>
		</div>

        <div class="container right">
		    <div class="row">
			    <div class="right-content">
                   Right content here
			    </div>
           </div>		
       </div>
    </div>

Answer 1

要达到您想要的效果，您需要使用Bootstrap 4 order-*类。下面的代码段中的order-last会默认重新排序列，但order-md-first会使列在中（md）或更大的屏幕上显示。

还有其他方法可以使用订单类来实现相同的结果。这只是可能的选择之一。

但您的代码中还有许多其他和基本的错误。以下是一些指示：

• 不要将容器嵌套在其他容器中。在列中嵌套行列对，而不是

• 请勿将任何内容直接放入.row。 Bootstrap行不是为此而设计的。将一个或多个列（.col-*）放入一行，并将所有内容放入该列中。

• 默认情况下，Bootstrap 4是基于flexbox的，它的类几乎可以完成您在定位和间距方面所需的一切。使用那些本机Bootstrap类而不是不必要的自定义css hacks。

这是一个有效的代码段（单击下面的“运行代码段”按钮并展开到整页）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-3 col-xl-2 bg-light order-last order-md-first py-3">
            Left div content <br>
            Left div content <br>
            Left div content <br>
        </div>
        <div class="col-12 col-md-9 col-xl-10 bg-primary py-3">
            <div class="card py-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col text-center">
                            <h2>Right div TITLE</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-center">
                            <a href="#">
                                <img class="img-fluid" src="https://placeimg.com/888/88/tech">
                                <h3>Right div subtitle</h3>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col text-center">
                        Right div content here
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

注意：该代码不包含任何自定义CSS。如果你想为它添加一些自定义css，请逐行开始添加它以查看自定义css中断Bootstrap的位置。

此外，上面代码段中的背景类bg-light和bg-primary只是为了让您更容易看到。