获取不正确的分页和错误的布局视图

Question

我已经使用bootstrap和jquery编写了一个代码来创建分页，代码工作正常，但它给出了错误的分页。我也尝试将每个细胞分成两列。一列有图像，另一列有（名称，地点，年龄和性别为行），但是与单元格重叠。

我的代码如下所示

任何人都可以告诉我一些解决方案吗

JSFIddle

<section id="portfolio">
    <section class="container">
        <div class="figCont">
            <section>
                <figure>
                    <div id="left_col"><img src=""/></div>
                    <div id="right_col">
                        <div class="row">Name: Lessy</div>
                        <div class="row">Place: Mumbai</div>
                        <div class="row">Age: 18</div>
                        <div class="row">Gender: male</div>
                    </div>
                </figure>
            </section>
            <section>
                <figure>aaaa</figure>
            </section>
            <section>
                <figure>bbbb</figure>
            </section>
            <section>
                <figure>cccc</figure>
            </section>
            <section>
                <figure>dddd</figure>
            </section>
            <section>
                <figure>ffff</figure>
            </section>
            <section>
                <figure>gggg</figure>
            </section>
            <section>
                <figure>2328</figure>
            </section>
            <section>
                <figure>9343</figure>
            </section>
            <section>
                <figure>9323</figure>
            </section>
            <section>
                <figure>9445</figure>
            </section>
            <section>
                <figure>4349</figure>
            </section>
            <section>
                <figure>5595</figure>
            </section>
            <section>
                <figure>2439</figure>
            </section>
            <section>
                <figure>6459</figure>
            </section>
            <section>
                <figure>2329</figure>
            </section>
            <section>
                <figure>3431</figure>
            </section>
            <section>
                <figure>4552</figure>
            </section>
            <section>
                <figure>5453</figure>
            </section>
            <section>
                <figure>6554</figure>
            </section>
            <section>
                <figure>7455</figure>
            </section>
            <section>
                <figure>6343</figure>
            </section>
            <section>
                <figure>7343</figure>
            </section>
            <section>
                <figure>8343</figure>
            </section>
            <section>
                <figure>9565</figure>
            </section>
            <section>
                <figure>2329</figure>
            </section>
            <section>
                <figure>9343</figure>
            </section>
            <section>
                <figure>2329</figure>
            </section>
            <section>
                <figure>2329</figure>
            </section>
            <section>
                <figure>3439</figure>
            </section>
            <section>
                <figure>2329</figure>
            </section>
            <section>
                <figure>9454</figure>
            </section>
        </div>
        <nav class="paging"></nav>
    </section>
</section>