grid columns wrap after upgrading to bootstrap 4

I have a table like display made using the bootstrap grid classes. The body rows of which are populated dynamically with javascript. The table is hidden or shown depending upon the state of the application. I have a div with an id which contains a row for the header columns and another div with another id to hold the body rows like this:

        <div id="myDynamicList" style="display:none;">
            <div class="row" id="myHeaderRow">
                <div class="col-sm-4 tabledHeader">Service Id</div>
                <div class="col-sm-4 tabledHeader">Service Type</div>
                <div class="col-sm-1 tabledHeader">Synchronised</div>
                <div class="col-sm-1 tabledHeader">Singleton</div>
                <div class="col-sm-2 tabledHeader"></div>
            </div>
            <div id="myListOutput"></div>
        </div>

In bootstrap 3.5 this works fine. In 4 every col is on a new line when they should be in-line. If I remove the wrapping divs such as the myListOutput and myDynamicList the layout is corret. Cols side by side filling the comlete row and each row on a new line.

I need the wrapping divs in order to get a hook in the DOM to append my child elements to but this throws the layout

How should this be done in bootstrap 4.