在小屏幕上将侧板移动到顶部

Question

如何移动测试块，使其在大屏幕上保留并向上移动到小屏幕？ 移动设备上的“测试”元素必须移到顶部，大屏幕上的元素移到左侧。

<div class="container">
  <div id="test">
    <div class="card " style="width: 25rem; 
                     background-color: #eeeeee;
                     border: 1px solid transparent;
                     border-color: #666869;">
      <div id="eventinmycityapp">
        <eventinmycityside></eventinmycityside>
      </div>
    </div>
  </div>

  <div class="row row-offcanvas row-offcanvas-right">
    <div class="col-xs-12 col-sm-9">
      <div class="row">
        @yield('content')
      </div>
      <!--/row-->
    </div>
    <!--/span-->