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