Html 调整页面大小时将第二列置于顶部

我正在尝试使用引导网格在页面上进行响应性设计

这是我的HTML：

<div class="row row-2">
    <div class = "col-sm-4 col-sm-offset-2">
        <img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
    </div>
    <div class="col-sm-4 body-slogan">
        <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
    </div>
</div>

使用此应用程序保存您的想法

css文件仅包含字体和大小。我的问题是：当我调整页面大小以触发bootstrap extra small column类时，是否可以将第二列放在顶部

代码位于上方，第二列位于底部。我无法交换列的内容，因为我希望第一列在更大屏幕的左侧

---

提前谢谢

如果您使用的是bootstrap4，那么使用

flex-direction:column-reverse非常简单

下面是一个简单的Bootstrap4示例。只需使用
display:flex将行包装到一个容器中并给它一个灵活的方向：列反转；`


.row{
背景#f8f9fa；
边缘顶部：20px；
}
.反向{
显示器：flex；
弯曲方向：柱反向；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}
/*桌面视图*/
@介质（最小宽度：1281px）{
.反向{
弯曲方向：立柱；
}
}

一排
第2排
如果您不想使用bs4或不知道如何使用
display:flex
，可以这样做。
别忘了根据需要更改类名


.row-2{
方向：rtl；
}
.第2排{
方向：ltr！重要；
边框：1px实心#eee；
背景：#fefefe；
填充：1rem；
}
.第2行。col-md-offset-2{
左边距：0；
保证金权利：16.666.7%；
}

使用此应用程序保存您的想法
您真的使用Bootstrap 3还是4？我在页面上使用Bootstrap 3.3.7是否可以尝试使用Bootstrap 3.3.7？谢谢您的回答，但在Bootstrap 3.3.7上它不起作用。