Bootstrap响应式网格移动端布局问题：第二区块需并排第一区块

你的问题出在两个目标区块被放在了独立的.row容器里，每个.row会占满整行宽度，再加上原有的列类只针对sm及以上断点生效，导致移动端下两个区块只能上下排列。另外，用纯数字做类名不符合HTML规范，得调整一下。

直接修改代码结构，把两个区块的列放到同一个.row中，同时给列添加xs断点的宽度类，就能实现移动端紧邻显示：

<div class="container-fluid" id="MainText">
  <div class="row">
    <div class="col-sm-12 col-md-3">
      <!-- 将两个区块的列合并到同一个row容器内 -->
      <div class="row">
        <div class="col-6 col-sm-6">
          <div class="block-1">
            <h4 id="Galv_pakalp_Header">Mūsu galvenie pakalpojumi</h4>
            <p>some text</p>
          </div> 
        </div>
        <div class="col-6 col-sm-6">
          <div class="block-2">
            <h4 id="Popul_Griez_Header">Populārākie vīrešu griezumi</h4>
            <p>some text</p>
          </div> 
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <h2 id="Barb_cons">Barb_cons</h2>
      <img src="" class="rounded float-end" alt="">
      <p>some text</p>
    </div>
  </div>
</div>

关键修改说明： #

• 合并独立的.row容器，让两个目标列处于同一行环境中
• 新增.col-6类，确保在xs断点（<576px，移动端）下每个列占50%宽度，实现并排显示
• 将纯数字类名改为合法的block-1、block-2，避免潜在的样式或逻辑问题

如果你的“第二个区块”指的是右侧的.col-md-9内容，原代码中移动端它本来就会紧跟左侧区块下方；若需要调整移动端的显示顺序，可以用Bootstrap的order-*类，比如让右侧内容在移动端排在前面：

<div class="col-sm-12 col-md-3 order-2 order-md-1">
  <!-- 左侧内容 -->
</div>
<div class="col-md-9 order-1 order-md-2">
  <!-- 右侧内容 -->
</div>

内容的提问来源于stack exchange，提问作者Jānis