How to wrap content around a display suite region?

Question

I'm using the nifty Display Suite module to create a custom layout for an event page. I'm using the stacked fluid 2 column layout with the Body field on the left and the image and event fields in the left column.

I would like the body (left region) to wrap around the image and date fields (right region). I''ve been unable to figure out to to accomplish this.

http://ctu.robohobo.net/node/17

How would I make that happen?

Drupal: 7.19 Display Suite: 7.x-2.0

Answer 1

To solve this issue you need to reorder your html by flipping columns in your custom layout

If you inspect your html you'll see that group-left renders first then group-right

<div class="group-left">content</div>

<section class="group-right">image and location </section>

So you need to have the following structure:

<div class="group-left">image and location </div>

<section class="group-right">content</section> 

Then add the following style to your css file

.ds-2col-stacked > .group-left {
  float: right;
  width: auto;
}

.ds-2col-stacked > .group-right {
  float: none;
  width: auto;
}

Answer 2

Try to change structure of template file of display suite module file named ds-2col.tpl.php in :

your project > sites > all > ds > layouts > ds_2col > ds-2col.tpl.php