Render Array Customise Theming
I can answer the first part of your question... 

Drupal uses render arrays for the different outputs. Since you only specify two single dimension arrays with #markup they are rendered as 2 strings.

There are multiple ways to achieve what you want, I will highlight 2;


Use #prefix and #suffix:

$output['element1']=array (
  "#type"=&gt;"markup",
  "#markup"=&gt;"Hello World!"
  "#prefix"=&gt;'&lt;div class="row"&gt;&lt;div class="col-md-12"&gt;',
  "#suffix"=&gt;'&lt;/div&gt;&lt;/div&gt;',
);

Use nested elements:

$output['element1']=array (
  'row' =&gt; array(
    '#prefix' =&gt; '&lt;div class="row"&gt;',
    '#suffix' =&gt; '&lt;/div&gt;',
    'cols' =&gt; array( // This has no #, so is the next level of elements
      '#markup' =&gt; t('Hello World!'),
      '#prefix' =&gt; '&lt;div class="col-md-12"&gt;',
      '#suffix' =&gt; '&lt;/div&gt;',
    ),
  ),
);



See this related issue: How to nest elements in a render array.

However, there might be cases where it is not possible to alter the output of modules. Instead you want to do this in the theme. Your suggestion was not that bad. It is just that in twig arrays are noted with a dot symbol. {{ content['element1'] }} should be {{ content.element1 }}

&lt;div class="row"&gt;
     &lt;div class="col-md-12"&gt;
        {{ content.element1 }}
     &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="row"&gt;
     &lt;div class="col-md-12"&gt;
        {{ content.element2 }}
     &lt;/div&gt;
 &lt;/div&gt;