如何在引导 4 中在大屏幕上并排放置，并在小屏幕上相互下方?

Question

我在一行中有两列，但它们不是并排的。它们在另一行内的另一个div 列中，但这应该无关紧要，不是吗？除非另有编码，否则列应始终并排。如何确保列在较大的屏幕上彼此相邻，在较小的屏幕上彼此下方？我尝试了订单 - * 标签，但这不起作用。我只是一个初学者，所以很抱歉这很容易解决，但我自己也想不通。

现在看起来像这样，文字应该在右侧图片旁边：

在此处输入图像描述

这是代码：

.recept-bereiding {
	color: #9a084d;
	margin-left: 0px;
	margin-right: 50px;
}
.recept-bereiding p {
	font-size: 0.85rem !important;
}
.steps { 
	padding-left: 0px;
	list-style-type: none;
	color: #9a084d;
	font-size: 0.9em;
	counter-reset: step-counter calc(var(--start) - 1);
}
.steps img {
	padding-bottom: 5px;
}
.steps ol {
	counter-reset: step-counter;
}
.steps li {
	counter-increment: step-counter;
	counter-reset: none;
}
.steps li::before {
	content: counter(step-counter);
	background-color: #7dc623;
	margin-right: 5px;
	padding: 4px 8px;
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	border-radius: 100%;
}

<div class="container ">
		<div class="row d-flex justify-content-center">
			<div class="col-md-8 recept-bereiding">
				<h3>Omschrijving</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus odio id augue ornare scelerisque. Quisque porta tempor velit, in viverra urna euismod in. Nulla nec efficitur turpis. Quisque at.</p>
				<h3>Bereidingswijze</h3>
				<row>
					<div class="col-md-3 p-0 steps">
						<img src="https://i.imgur.com/SJAUllt.jpg" alt=""/>
					</div>
					<div class="col-md-9 p-0">
						<ol style="counter-reset: step-counter 0" start="1" class="steps">
							<li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
						</ol>
					</div>
				</row>
			</div>
		<div class="col-md-3 receptside">
		</div>
	</div>
</div>

Answer 1

好吧，

除非另有编码，否则列应始终并排排列

并不总是正确的，这取决于视口尺寸。 我会这样编码：

<div class="container">
<div class="row">
<div class="col-md-4 recept-bereiding">
<h3>Omschrijving</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus odio id augue ornare scelerisque. Quisque porta tempor velit, in viverra urna euismod in. Nulla nec efficitur turpis. Quisque at.</p>
<h3>Bereidingswijze</h3>
</div>
<div class="col-md-4 p-0 steps">
<img src="https://i.imgur.com/SJAUllt.jpg" alt="" class="img-fluid"/>
</div>
<div class="col-md-4 p-0">
<ol style="counter-reset: step-counter 0" start="1" class="steps">
<li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
</ol>
</div>
<div class="col-md-4 receptside">
</div>
</div>
</div>
</div>

请考虑以下几点：

1. 不要在 html 中使用行标记。 row 是一个引导类，必须被视为

<div class="row">

2. 结束标签不需要类，如下所示：

</div class="row">

3. 相应地使用引导响应数字。

<div class="col-md-4"

意味着它将占据中型屏幕上提供给其div 的 12 个可用空间中的 4 个部分

Answer 2

可以将<row>更改为<div class="row">。全屏显示时，该列将并排显示。

.recept-bereiding {
	color: #9a084d;
	margin-left: 0px;
	margin-right: 50px;
}
.recept-bereiding p {
	font-size: 0.85rem !important;
}
.steps { 
	padding-left: 0px;
	list-style-type: none;
	color: #9a084d;
	font-size: 0.9em;
	counter-reset: step-counter calc(var(--start) - 1);
}
.steps img {
	padding-bottom: 5px;
}
.steps ol {
	counter-reset: step-counter;
}
.steps li {
	counter-increment: step-counter;
	counter-reset: none;
}
.steps li::before {
	content: counter(step-counter);
	background-color: #7dc623;
	margin-right: 5px;
	padding: 4px 8px;
	font-size: 0.9em;
	font-weight: bold;
	color: #ffffff;
	border-radius: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container ">
		<div class="row d-flex justify-content-center">
			<div class="col-md-8 recept-bereiding">
				<h3>Omschrijving</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus odio id augue ornare scelerisque. Quisque porta tempor velit, in viverra urna euismod in. Nulla nec efficitur turpis. Quisque at.</p>
				<h3>Bereidingswijze</h3>
				<div class="row">
					<div class="col-md-3 p-0 steps">
						<img src="https://i.imgur.com/SJAUllt.jpg" alt=""/>
					</div>
					<div class="col-md-9 p-0">
						<ol style="counter-reset: step-counter 0" start="1" class="steps">
							<li>Vestibulum rhoncus egestas lectus quis vulputate. Vestibulum rutrum, ipsum vel vestibulum suscipit, sem lorem malesuada ex, a.</li>
						</ol>
					</div>
				</div>
			</div>
		<div class="col-md-3 receptside">
		</div>
	</div>
</div>