Html 3列自举网格布局故障

我正在尝试设置一个网站的一部分，使其具有一列文本、一个长的垂直图片，以及图片另一侧的另一列文本。我已经能够实现我想要的外观，但只有通过使用负的上边距（本例中未显示）

我试过的代码在这里

---

您不需要额外的行，因为新行将在前一行下方创建一个新块。这就是CSS网格的工作方式（在您的示例中是引导）。只需将步骤1/2的内容放在左栏，div放在中栏，步骤3/4的内容放在右栏

<div class="row">
    <div class="col-md-3 col-md-offset-1">
        <p class="lead text-left">Step 1: asdf asdf asdf </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p>

        <p class="lead">Step 2: Lorem ipsum dolor sit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p>
    </div>

  <div class="col-md-3">
    <div class="phone"></div>
  </div>

  <div class="col-md-3">
    <p class="lead text-left">Step 3:Lorem ipsum dolor sit</p>
    <p>Start typing your address &amp; we will give you a list of options to choose from.</p>

    <p class="lead">Step 4: Lorem ipsum dolor sit</p>
    <p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p>
  </div>
</div>

步骤1:asdf asdf asdf asdf
Lorem ipsum dolor sit amet，是一位杰出的献身者。Fusce blandit，dolor在

第2步：Lorem ipsum dolor-sit
Lorem ipsum dolor sit amet，是一位杰出的献身者。福斯·布兰迪特，多洛

第3步：Lorem ipsum dolor-sit
开始键入您的地址&；我们将为您提供一个选项列表，供您选择

第4步：Lorem ipsum dolor-sit
数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据

---

示例：

我看不出问题所在。在您的示例中，您已经有了“一列文本、一个长的垂直图片和另一列文本”。请解释清楚，如果possible@NunoArruda如果你向下滚动，你可以看到我有一个步骤3，4，我也想包括在内，它们出现在例子中的灰色div下面。我看到了。步骤3和步骤4是问题所在吗？如果是，你想如何显示步骤3和4？@ NunoRuura是的，问题是步骤3，而4，当我使用一个新行添加它们时，它们被推到灰色DIV之下，而我唯一能修复的方法是在div上使用一个负的顶部边距。步骤3/4在右边。向我们展示你成功的前代码。