在Bootstrap中创建响应式分隔器（垂直/水平）

Question

我在Bootstrap中创建响应式分压器有些费劲。响应式分隔器是指在大屏幕上为垂直，在较小屏幕上为水平的分隔器。

垂直分隔线：

水平分隔线：

Answer 1

这是一个简单的例子，如何使用 Bootstrap 4.1 制作带有文字的响应式水平线

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <hr class="my-auto flex-grow-1">
  <div class="px-4">SOME TEXT HERE</div>
  <hr class="my-auto flex-grow-1">
</div>

Answer 2

列确实需要等高，因此 Flexbox 似乎是最佳选择

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
}
.sep {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sepText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.sepText::before,
.sepText::after {
  content: '';
  flex: 1;
  width: 1px;
  background: currentColor;
  /* matches font color */
  margin: .25em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-5">
      <h2>Lorem ipsum</h2>
      <p>blah blach hery asd ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d
        <br>asd ads asd da da da dada
      </p>
    </div>
    <div class="col-sm-2 sep">
      <span class="sepText">
                      OR
                  </span>

    </div>
    <div class="col-sm-5">
      <h2>Lorem lorem</h2>
      <p>ok ok ok</p>
    </div>
  </div>
</div>

Codepen 演示