Moving the side unit to the top on small screens

How to move the test block so that it is left on the big screen and moves up to the small ones? It is necessary that the element "test" on the mobile is shifted to the top, and on the big screens was on the left.

  <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-->

via Chebli Mohamed