How to implement "table" in css with portable "columns"?

Question

css

I have already asked the question before, but I did not correctly put it.
The essence of the task:
There is a site on WP + Woo
I need to customize the page for displaying a list of product categories. Just a picture and a signature from the bottom (by default) do not suit me. I want to do something like this but with responsive design.
As you can see from the example, there are 2 columns for displaying categories. Each category is displayed as

• String Width:100% of block, aligncenter(Category name)
  
• Row with 2 columns, with image on the left and content on the right
  
• And it all ends with the line width:100% from the 2nd column of the 2nd line, alignright(link "more")
  

At first I thought to use the row-fluid from bootstrap. Everything is written there as needed, when the screen resolution changes, the blocks are rebuilt one under the other depending on the float. But one thing did not suit me, namely, that with such a design

<div class="row-fluid">
   <div class="span3">
      <p>Col1-content</p>
   </div>
   <div class="span9">
      <p>Col2-content</p>
   </div>
</div>

The height of the span3 and span9 blocks are not equal and I don’t know how to align them to the height of the largest.
I was advised to use table and table-cell respectively, but transferring table-cell is not possible no matter how I tried, because the new line itself will not be drawn. That is, it is impossible to use the solution in adaptive design, or I don’t know how.
Therefore, the question remains open:
1) How to align the height of span blocks inside row-fluid?
or
2) What to use besides row-fluid to solve the problem?

Answer 1

Everything is not right.
Finally found it, like this is what you need. You never know who will come in handy:
bootstrap-3-responsive-columns-of-same-height
Description of how to work with this
In memoriz: a good and very understandable article on the Great and Mighty.

Answer 2

For your task, the css solution is the most economical. For row-fluid use table-row, for span - table-cell in case of desktop. For mobile gadgets, set the block definition of these elements in the style sheet. To describe the situation more specifically, you need a script for your adaptive design - which is how it transforms depending on the width of the gadget's screen.