Custom Page Template: putting content blocks into columns

I have been following the Grav documentation (https://learn.getgrav.org/cookbook/general-recipes#render-content-in-columns) to figure out how to do this, but haven't had much luck. The content for my page is in default.md, but I can't figure out to how place images and content into separate columns and rows.

I've included a screenshot of what I've created in HTML and CSS. Basically I want to put an image into the left column of a row, and details into the right column. See here: http://imgur.com/HuTSGw5

When I am editing the page template however, I only seem to have one "variable" (if that's the right word) controlling all the content. See my code for base.html.twig:

<div class="container">
<div class="row">
<div class="col-md-4">
{% block content %} {# thumbnail image goes here #}
{% endblock %}
</div> <!-- COLUMN END -->

        <div class="col-md-8">
            {% block content %} {# album details go here #}
            {% endblock %}
        </div> <!-- COLUMN END -->

    </div > <!-- ROW END -->

How do I specify that a content block is specific for an image, and that another is specific for album details?

I do not get your code. The guide you are following is depending on tables and not divs. However, if you want your thumbnail/s to be displayed in a specific position, you could use

{% for image in page.media.images %}
   {{ image.html }}
{% endfor %}

Or just

{% set image = page.media.images|first %}
{{ image.html }}

And for the content, you simply get the content with

{{ page.content }}

Hope it helps a bit to understand how Grav works, the docs and all available themes got allot more for you :)

Another option is to use Section shortcodes as provided by the shortcode-core plugin.