屏幕调整大小时将两个元素绑在一起（bootstrap4）

Question

我有以下代码片段（使用bootstrap4和css），它在正常屏幕中正确显示（如第一个屏幕截图所示）

    `<div class="col-1 col-sm-2 col-lg-1" style="float:left;">  
        <table class="table">
          <thead style=" ">
            <tr>
              <p style="height:100%; border-left: 3px solid #2a93fc;">
                <h2 class="general_info" style="transform: rotate(270deg); margin-top:-150px; margin-left:30px ">2018<h2>
              </p>
            </tr>
          </thead>
        </table>
      </div>`

但是当我将屏幕大小调整为中等尺寸时，2018标签会在第二个屏幕截图中向上移动：

如何将这两个元素捆绑在一起？