How can i use different mark-up in each tab

I have 3 tabs which made with jQuery Ui, in each tab i need to make different bootstrap mark-up and content, each tab have unique id. So basically it’s looks like this

<div id="tabs-1">
<p>Some text</p>
</div>

<div id="tabs-2">
<div class="col-md-4">
<img src="1.jpg">
<p>Some text</p>
</div>
</div>

And this how its look in WordPress

<?php
    $id = 7;
    $post_tabs = new WP_Query(array('cat'=> $id, 'post_per_page' => 5));
    ?>

    <?php if ($post_tabs-> have_posts() ) :  ?>

    <div class="tabs">
        <ul class="menu-nav">
    <?php while ( $post_tabs->have_posts() ) : $post_tabs->the_post(); ?>
        <li><a href="#tabs-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; ?>

        </ul>

    <?php while ( $post_tabs->have_posts() ) : $post_tabs->the_post(); ?>
        <div id="tabs-<?php the_ID(); ?>">
            <?php the_content(); ?>
        </div>

    <?php endwhile; ?>

    </div>
    <?php else: ?>
    <!-- no posts found -->
    <?php endif; ?>

As a default all tabs have .col-md-12