.ds-2col-stacked > .group-fhl {
  float: left; /* LTR */
      width: 70%;
}

.ds-2col-stacked > .group-fhr {
  float: right; /* LTR */
  width: 30%;
}

 .ds-2col-stacked > .group-left {
  float: left; /* LTR */
  width: 50%;
}

[dir="rtl"] .ds-2col-stacked > .group-left {
  float: right;
}

.ds-2col-stacked > .group-right {
  float: right; /* LTR */
  width: 50%;
}

[dir="rtl"] .ds-2col-stacked > .group-right {
  float: left;
}

.ds-2col-stacked > .group-footer {
  clear: both;
}

<{{ outer_wrapper }}{{ attributes.addClass('ds-2col-stacked', 'clearfix') }}>

  {{ title_suffix.contextual_links }}


    <{{ fhl_wrapper }}{{ fhl_attributes.addClass('group-fhl') }}>
    {{ fhl }}
  </{{ fhl_wrapper }}>

  <{{ fhr_wrapper }}{{ fhr_attributes.addClass('group-fhr') }}>
    {{ fhr }}
  </{{ fhr_wrapper }}>


  <{{ header_wrapper }}{{ header_attributes.addClass('group-header') }}>
    {{ header }}
  </{{ header_wrapper }}>

  <{{ left_wrapper }}{{ left_attributes.addClass('group-left') }}>
    {{ left }}
  </{{ left_wrapper }}>

  <{{ right_wrapper }}{{ right_attributes.addClass('group-right') }}>
    {{ right }}
  </{{ right_wrapper }}>

  <{{ footer_wrapper }}{{ footer_attributes.addClass('group-footer') }}>
    {{ footer }}
  </{{ footer_wrapper }}>

</{{ outer_wrapper }}>

ds_2col_stacked_custom:
  label: Two column stacked layout custom
  category: Display Suite
  class: 'DrupaldsPluginDsLayout'
  type: partial
  template: ds_layouts/ds-2col-stacked-custom/ds-2col-stacked-custom
  library: ds_2col_stacked_custom
  regions:
    fhl:
      label: fhl
    fhr:
      label: fhr
    header:
      label: Header
    left:
      label: Left
    right:
      label: Right
    footer:
          label: Footer

# DS.
ds_2col_stacked_custom:
  version: VERSION
  css:
    theme:
      ds_layouts/ds-2col-stacked-custom/ds-2col-stacked-custom.css: {}