Jquery 如何在整页上并排显示2个内容-Bootstrap/CSS/laravel

我有两个内容，我试图在整页上并排显示，当它的小屏幕（移动）时，一个在另一个下面。我有点成功地将它们并排显示在整页上，但当屏幕很小时，它们就在一起了

这是我的master.blade页面，我在其中包含了这两个页面

@yield:

<footer>
  <div class="container">
    <hr>
    <div class="row">
      <div class="col-md-12">
        <p class="text-center" style="font-size: 20px; ">MyHero &copy; {{ date('Y') }} </p>
      </div>
      @yield('map') // content 1
      @yield('Contact') // content 2
    </div>
  </div>
  <br><br><br>

</footer>

@收益率：

MyHero©；{{date（'Y'）}

@yield（'map'）//内容1
@屈服（'Contact'）//内容2

节（“映射”）的我的css @节（“地图”）

“联系人”部分的我的css

@第节（“联系人”）

这就是你的意思吗

基本上，我所做的一切都是将你的2 2
@yield（）
包装在一个引导的网格类中，这将是页面上的2列，而在中等设备和以下设备上，这两列应该位于另一列之下




MyHero©；{{date（'Y'）}

@产量（'map'）/content 1
@收益率（'Contact'）/content 2




您可以尝试使用flexbox。div根据可用的视口宽度进行调整。请注意，单独定义样式而不是内联定义样式始终是一种很好的做法


.row{
显示器：flex；
柔性包装：包装；
}
.map，.cont{
柔性生长：1；
高度：300px；
宽度：500px；
}


MyHero©；{{date（'Y'）}

内容1
内容2
否：（没有帮助。同样的问题它没有帮助。您的解决方案只是在任何屏幕大小下一个接一个地显示它们。只有当屏幕很小时，我才需要它们在另一个下显示。如果打开代码段，转到全屏并调整屏幕大小，您将看到它正是您想要的。如果我只编写一个简单的字符串，它确实有效，但是当我做@yield时，它会一个接一个地显示内容
<div class="map" style="height:300px;width: 500px;display: block; float: left;"> 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <div class="cont" style="height:300px;width: 500px; display: block; float: right;">

<footer>  
    <div class="container">  
        <hr>
        <div class="row"> 
            <div class="col-md-12" > 
                <p class="text-center" style="font-size: 20px; " >MyHero &copy; {{ date('Y') }} </p>
            </div> 

            <div class="col-md-6">
                    @yield('map') / content 1
            </div>
            <div class="col-md-6">
                    @yield('Contact') / content 2
            </div>

        </div> 
    </div> 
    <br><br><br>

</footer>