使用vue material 构建服务描述页面，但是我无法使文本和图像堆叠

Question

如何保证当屏幕小于768px时。文本和图像将相互堆叠。

具有包含内容和图像的 md-column 属性的 md-layout 是在屏幕缩小到平板电脑、手机和超小屏幕（如有必要）时扩展整个页面。

<md-layout md-row md-sm-columns>

    <md-layout md-column="5"> <p class = "md-display-1"> Connect Soft documents </p>

  <p class = "">Allow documents that feed into each other to provide a consistent, untainted view of what your institution is doing.</p>

  </md-layout>


  <md-layout md-column="7">0</md-layout>



</md-layout>


<md-layout md-row md-sm-columns>

  <md-layout md-column = "7">

  <md-image md-src = "../assets/Statistics.png">

  </md-image>

  </md-layout>


  <md-layout md-column = "3"> <p class = "md-display-1"> Improve decision models</p>

  <p class = "">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


  </md-layout>



</md-layout>


<md-layout md-row md-sm-columns>

    <md-layout md-column="5"> <p class = "md-display-1">Search. Get what is important to You! </p>

  <p class = "">All notifications and documents are indexed and archived so that you can find what is needed at all times.</p>

  </md-layout>


  <md-layout md-column="7">0</md-layout>



</md-layout>

<md-layout md-row md-sm-columns>

  <md-layout md-column="5">


  </md-layout>


    <md-layout md-column="7"> <p class = "md-display-1"> Collaborate with other apps! </p>

  <p> Connect to the tools you need to prevent wasting time using so many apps </p>

  </md-layout>



</md-layout>

Answer 1

我建议你花一个小时玩 http://vuematerial.io/#/ui-elements/layout。在那里你会找到基本的使用信息，但我认为必须使用它才能真正理解它。

我创建了一个简单的（可能的）解决方案，如果这是您想要的；

<md-layout md-row md-sm-columns>

<md-layout md-column="7" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">

  <md-image md-src="http://via.placeholder.com/800x600">

  </md-image>

</md-layout>


<md-layout md-column="3">
  <p class="md-display-1"> Improve decision models</p>

  <p class="">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


</md-layout>

所以 - 使用 md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33" 属性是一种方法。代码笔在这里：https://codepen.io/anon/pen/jwRoYZ

但一如既往 - 您也可以分配自己的 class 并直接通过 CSS 定位它（在 Flex 和 mediaqueries 的帮助下）；

 <md-layout md-row md-sm-columns>

<md-layout md-column="7" class="my-custom-class">

  <md-image md-src="http://via.placeholder.com/800x600">

  </md-image>

</md-layout>


<md-layout md-column="3">
  <p class="md-display-1"> Improve decision models</p>

  <p class="">Use statistical modelling to identify patterns and anomalies in the data that can help you make better decisions.</p>


</md-layout>

还有一些特殊的CSS媒体查询；

@media (max-width: 600px) {
  .my-custom-class {
    min-width: 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
  }
}

Codepen 在这里：https://codepen.io/anon/pen/BZEeGw

关键字（可玩）：CSS 媒体查询、Flex、VueMaterial

使用vue material 构建服务描述页面，但是我无法使文本和图像堆叠

Using vue material to build a service description page, however I am unable to cause the Text and Image to stack

css

media-queries

vue.js

vue-material