当屏幕尺寸改变时，如何确保这些内容行堆叠？

Question

我想确保每列中的内容在达到特定屏幕尺寸时堆叠，例如 768px

<template>

    <div>

    <div class = "edit">

        <h1 class =  "md-display-3">Connect to be more</h1>
        <h2 class = "md-subhead">Always be aware of the state of your business </h2>

    </div>



<div class = "designGeneral">

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

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


                <h1 class = "md-display-1" id = "responsive"> Connect Soft documents </h1>

                  <p class = "" id = "responsive" >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"  > 


                <p id = "responsive>
                    ------
                </p>

              </md-layout>




        </md-layout>


        <hr> 


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

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


        <p>
            ------
        </p>

      </md-layout>



           <md-layout md-column = "5" style = "padding-right : 30px"> 


                <h1 class = "md-display-1"> Improve decision models</h1>

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

              </md-layout>



                </md-layout>

<hr> 

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

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


                <h1 class = "md-display-1">  Search. Get what is important to You!</h1>

                  <p class = "" style = "">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"> 


                <p>
                    ------
                </p>

              </md-layout>     

    </md-layout>

       <hr> 
                    <md-layout md-row md-md-columns>

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



                  </md-layout>



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


                   <h1 class = "md-display-1">Collaborate with other apps!</h1>

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


                  </md-layout>



            </md-layout>



</div>

在下面的 md-layout 中，我添加了一个 id = "responsive" 来引用元素。

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

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


                    <h1 class = "md-display-1" id = "responsive"> Connect Soft documents </h1>

                      <p class = "" id = "responsive" >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" id = "responsive" > 


                    <p>
                        ------
                    </p>

                  </md-layout>




            </md-layout>

然后我添加了以下媒体查询

@media screen and (max-width : 768px ) {

float: none !important;
 margin: auto;
text-align : center;

}

尽管它不起作用

它挤压并溢出

Answer 1

HTML ID 应该是唯一的。如果要引用多个具有相同名称的元素，请使用 class 属性。

Vue material 使用 flexbox 网格系统。它定义了一组您的组件可以响应的屏幕尺寸。

http://vuematerial.io/#/ui-elements/layout

例如，如果您希望某个元素在小屏幕上占据 100%，您可以将
md-flex-small="100" 作为属性。

当屏幕尺寸改变时，如何确保这些内容行堆叠？

How do I ensure that these rows of content stack when the screen size changes?

vue.js

vue-material