Revision 88e78127-5b52-453d-a529-27e9f4ccabdb

You have to do this, Add your external css in  
>app > design > fronted > [vendor] > [theme] > Magento_Theme > layout > default.xml 

 

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" src_type="url"/>
        </head>
    </page>  

Then in your Magento admin, go to   
>**Content > Pages**   
Look for  **Home Page** page > Select **Edit** (under actions menu), then click on **Content**  then insert your code:  

    <div>
    <div class="row">
    <div id="main1"  style="display: none; border: 1px solid red;box- 
     sizing: border-box;">
      
    </div>
    <div id="main2" class="col-md-6" style="border: 1px solid black;box-sizing: border-box;">
        <h1>hello</h1>
    </div>
    </div>
    </div>
     <script type="text/javascript">
       var x = document.getElementById("main1");
      if (x.style.display === "none") {
       main2.className = "col-md-12";
      } 
    </script>

    
  
and it should work after following above instructions