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" class="col-md-6" style="border: 1px solid red;box-
sizing: border-box;">
<h1>hello</h1>
</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 main1 = document.getElementById('main1');
var main2 = document.getElementById('main2');
//main1.style.display = 'none';
if(main1.style.display == "none")
main2.className = "col-md-12";
// if (true) {} else {}
</script>
and it should work after following above instructions