I’m trying to build my first responsive grid (Great concept by the way!). I put together a very simple test page based of off this tutorial:

http://help.skuidify.com/m/components/l/376365-compose-pages-that-react-to-screen-size-with-the-resp…

I’m trying to use Option A : Flexible width . I just can’t get the right section to move under the left section when the screen gets small. I’m expecting the right section of the page to move under the left section when I shrink the screen size. That doesn’t seem to be happening…

Here’s my test page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" theme="Lightning Design">

   <models>

      <model id="Opportunity" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="Opportunity">

         <fields>

            <field id="Amount"/>

            <field id="CloseDate"/>

            <field id="Description"/>

            <field id="Name"/>

            <field id="Probability"/>

            <field id="StageName"/>

         </fields>

         <conditions>

            <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior=""/>

         </conditions>

         <actions/>

      </model>

   </models>

   <components>

      <grid uniqueid="sk-Uil40-77">

         <divisions>

            <division behavior="flex" minwidth="300px" ratio="1" verticalalign="top">

               <components>

                  <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Opportunity" buttonposition="" uniqueid="sk-Uj77H-103" mode="edit" layout="above">

                     <columns layoutmode="responsive" columngutter="4px" rowgutter="4px">

                        <column ratio="1" minwidth="300px" behavior="flex">

                           <sections>

                              <section title="Left Section" collapsible="no" showheader="true">

                                 <fields>

                                    <field id="Name" valuehalign="" type=""/>

                                    <field id="CloseDate" valuehalign="" type=""/>

                                    <field id="StageName" valuehalign="" type=""/>

                                 </fields>

                              </section>

                           </sections>

                        </column>

                     </columns>

                  </basicfieldeditor>

               </components>

            </division>

            <division behavior="flex" verticalalign="top" minwidth="300px" ratio="1">

               <components>

                  <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Opportunity" buttonposition="" uniqueid="sk-Uj7e0-113" mode="edit" layout="above">

                     <columns layoutmode="responsive" columngutter="4px" rowgutter="4px">

                        <column ratio="1" minwidth="300px" behavior="flex">

                           <sections>

                              <section title="Right Section" collapsible="no" showheader="true">

                                 <fields>

                                    <field id="Probability"/>

                                    <field id="Amount" decimalplaces="" valuehalign="" type=""/>

                                    <field id="Description" valuehalign="" type=""/>

                                 </fields>

                              </section>

                           </sections>

                           <renderconditions logictype="and"/>

                        </column>

                     </columns>

                  </basicfieldeditor>

               </components>

            </division>

         </divisions>

         <styles>

            <styleitem type="background" bgtype="none"/>

         </styles>

      </grid>

   </components>

   <resources>

      <labels/>

      <javascript/>

      <css/>

   </resources>

   <styles>

      <styleitem type="background" bgtype="none"/>

   </styles>

</skuidpage>